<template>
	<up-picker :show="props.show" :columns="columns" keyName="label" :cancelText="$t('my.cancel')"
		:confirmText="$t('confirm')" @close="close" @cancel="close" @confirm="confirm"></up-picker>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	});
	const emit = defineEmits(['close', 'confirm']);
	const columns = reactive([
		[{
			label: 'Taiwan (台灣) +886',
			value: '+886'
		}, {
			label: 'India (भारत) +91',
			value: '+91'
		}, {
			label: 'United States +1',
			value: '+1'
		}, {
			label: 'Australia +61',
			value: '+61'
		}, {
			label: 'Singapore +65',
			value: '+65'
		}, {
			label: 'United Kingdom +44',
			value: '+44'
		}, {
			label: 'Japan (日本) +81',
			value: '+81'
		}, {
			label: 'South Korea (대한민국) +82',
			value: '+82'
		}, {
			label: 'Indonesia +62',
			value: '+62'
		}, {
			label: 'Malaysia +60',
			value: '+60'
		}]
	]);

	const close = () => {
		emit('close', false);
	};

	const confirm = (event) => {
		emit('confirm', event.value);
	};
</script>

<style lang="scss" scoped>
</style>